<template>
	<view class="page" style="padding-bottom: 150rpx;">
		<topVue title="订单详情"></topVue>
		<view class="stateVue flex align-center padding-row30">
			<view class="icon relative">
				<image src="../../static/person/search.png" class="absolute-auto" style="width: 38rpx; height: 38rpx;"></image>
			</view>
			<text class="state" v-if="orderDetial.status==0">待支付</text>
			<text class="state" v-if="orderDetial.status==10">待发货</text>
			<text class="state" v-if="orderDetial.status==20">待收货</text>
			<text class="state" v-if="orderDetial.status==30">已完成</text>
			<text class="state" v-if="orderDetial.status==40">已取消</text>
		</view>
		<view class="box margin20 padding30" v-if="orderDetial.status==20 && list.length>0">
			<view class="flex-between align-center"  @click="$tools.route('../expressTrack/expressTrack', id)">
				<view class="title">物流信息</view>
				<image src="../../static/more.png" style="width: 42rpx; height: 42rpx;"></image>
			</view>
			<u-gap height="30"></u-gap>
			<view class="item" v-for="(item, index) in list" :key="index">
				<view class=" flex align-center">
					<view class="dot"></view>
					<text style="line-height: 1; padding-left: 20rpx; color: #333; font-weight: 600;">{{item.time | formatTime("YMDHMS")}}</text>
				</view>
				<view class="content">{{ item.content }}</view>
			</view>
		</view>
		<view class="box margin20 padding30">
			<view class="title">商品信息</view>
			<view class="flex align-center margin30" v-for="(item, index) in orderDetial.items" :key="index">
				<view class="picVue">
					<image :src="item.picUrl" style="width: 100%; height: 100%;"></image>
				</view>
				<view class="flex-column padding-row20 flex-between w100" style="height: 130rpx">
					<view class="w100 flex-between align-center">
						<view class="productname">{{item.spuName}}</view>
						<text style="color: #454545; line-height: 1;">X{{item.count}}</text>
					</view>
					<view class="flex">
						<text style="padding-right: 20rpx;" v-for="(o,i) in item.properties" :key="i">{{ o.valueName }}</text>
					</view>
					<view class="flex align-center">
						<image src="../../static/green_g.png" style="width: 40rpx; height: 40rpx;"></image>
						<view class="price">￥{{ item.price/100 }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="box margin20 padding30">
			<view class="title">收货地址</view>
			<viiew class="flex align-center margin20">
				<view class="name">{{orderDetial.receiverName}}</view>
				<view class="phone">{{orderDetial.receiverMobile}}</view>
			</viiew>
			<view class="content">{{orderDetial.receiverAreaName}}{{orderDetial.receiverDetailAddress}}</view>
		</view>
		<view class="box margin20">
			<view class="li flex-between align-center padding-row30">
				<text style="color: #4B5563; line-height: 1;">商品金额</text>
				<text style="color: #333; line-height: 1;">{{ orderDetial.totalPrice/100}}</text>
			</view>
			<view class="li flex-between align-center padding-row30">
				<text style="color: #4B5563; line-height: 1;">运费</text>
				<text style="color: #333; line-height: 1;">{{ orderDetial.deliveryPrice }}</text>
			</view>
			<view class="li flex-between align-center padding-row30">
				<text style="color: #4B5563; line-height: 1;">实付金额</text>
				<text style="color: #000; line-height: 1; font-weight: 700;">{{ orderDetial.payPrice/100 }}</text>
			</view>
		</view>
		
		<view class="botVue flex-center">
			<view class="cancelbtn" @click="isCancel=true" v-if="orderDetial.status==0">取消订单</view>
			<view class="cancelbtn" @click="toAfterSold()" v-if="orderDetial.status==20">售后</view>
			<view class="btn" @click="$tools.route('../index/help')">联系客服</view>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
			<view class="btn" v-if="orderDetial.status==20" @click="isReceive=true">确认收货</view>
		</view>
		
		<popup :show="isCancel" text="确认取消该订单?" @cancel="isCancel=false" @confirm="cancelFun"></popup>
		<popup :show="isReceive" text="确认已经收到商品?" @cancel="isReceive=false" @confirm="receiveFun"></popup>
		
		<u-action-sheet :list="actions" v-model="show" @click="confirm"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				state: 0,
				id: "",
				orderDetial: {},
				isCancel: false,
				list: [],
				isReceive: false,
				show: false,
				actions: []
			}
		},
		async onLoad(option) {
			this.id = option.value
			await this.getDetail()
			await this.showtrack()
		},
		methods: {
			confirm(e){
				console.log(e)
				uni.navigateTo({
					url: this.actions[e].path + "?id=" + this.id
				})
			},
			
			toAfterSold(){
				if(this.orderDetial.payChannelCode=="wallet1") {
					this.actions = [{text: "申请换货", path:"./sold_change"}]
				}else {
					this.actions = [{text: "申请仅退款", path: "./sold_only_refund"}, {text: "申请退货退款", path: "./sold_refund"}, {text: "申请换货", path:"./sold_change"}]
				}
			},
			
			async getDetail(){
				const res = await this.$request("/app-api/trade/order/get-detail","GET",{
					id: this.id
				})
				if(res.code===0) {
					this.orderDetial = res.data
					console.log("订单详情", this.orderDetial)
				}
			},
			async showtrack(){
				const res = await this.$request("/app-api/trade/order/get-express-track-list", "GET",{
					id: this.id
				})
				if(res.code===0) {
					console.log(res)
					this.list = res.data.length>3 ? res.data.slice(-3).reverse() : res.data.reverse()
					console.log("物流信息", this.list)
				}
			},
			// 确认收货
			async receiveFun(){
				this.loading = true
				const res = await this.$request("/app-api/trade/order/receive", 'PUT', {
					id: this.id
				}, "application/x-www-form-urlencoded")
				this.loading = false
				if(res.code===0) {
					this.isReceive = false
					this.$u.toast("收货成功") 
					this.showtrack()
					this.getDetail()
				}else{
					this.$u.toast(res.msg)
				}
			},
			// 取消订单
			async cancelFun(){
				const res = await this.$request("/app-api/trade/order/cancel", "DELETE", {
					id: this.orderDetial.id
				}, "application/x-www-form-urlencoded")
				if(res.code===0) {
					this.isCancel = false
					this.$u.toast("取消成功")
					setTimeout(()=>{
						this.$tools.back(1)
					}, 1000)
				}else{
					this.$u.toast(res.msg)
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.stateVue {
		width: 100%;
		height: 100rpx;
		background: linear-gradient(to right, #1CC289, #60A5FA);
		.icon {
			width: 50rpx;
			height: 50rpx;
			background: #fff;
			border-radius: 10rpx;
		}
		text {
			color: #fff;
			padding-left: 20rpx;
			font-size: 30rpx;
		}
	}
	.box {
		width: 690rpx;
		background: #fff;
		border-radius: 12rpx;
		box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25), inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
		.title {
			font-weight: 600;
			font-size: 30rpx;
		}
		.name {
			color: #333;
			font-weight: 600;
			line-height: 1;
		}
		.phone {
			color: #4B5563;
			line-height: 1;
			padding-left: 30rpx;
		}
		.content {
			color: #4B5563;
			line-height: 32rpx;
			padding-top: 20rpx;
		}
		.li {
			width: 100%;
			height: 90rpx;
			border-bottom: 1rpx solid #f5f5f5;
		}
		.picVue {
			width: 130rpx;
			height: 130rpx;
			background: #f5f5f5;
			border-radius: 15rpx;
		}
		.productname {
			color: #333;
			font-weight: 600;
			line-height: 1;
		}
		.kg {
			color: #666;
			line-height: 1;
		}
		.price {
			color: #1CC289;
			font-weight: 600;
			line-height: 1;
			padding-left: 10rpx;
		}
		.item {
			width: 100%;
			margin-bottom: 30rpx;
			.dot {
				width: 26rpx;
				height: 26rpx;
				border-radius: 50%;
				background: #1CC289;
			}
			.content {
				line-height: 40rpx;
				color: #333;
				padding-top: 20rpx;
			}
		}
	}
	.botVue {
		width: 100%;
		height: 120rpx;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;
		padding: 0 15rpx;
		.cancelbtn {
			flex: 1;
			height: 82rpx;
			border: 1rpx solid #ececec;
			line-height: 82rpx;
			text-align: center;
			border-radius: 30rpx;
			margin: 0 15rpx;
		}
		.btn {
			flex: 1;
			height: 82rpx;
			background: linear-gradient(to right, #1CC289, #60A5FA);
			line-height: 82rpx;
			text-align: center;
			border-radius: 30rpx;
			color: #fff; 
			margin-left: 20rpx;
			margin: 0 15rpx;
		}
	}
</style>